<template>
  <div >
    <vue-particles
        color="#409EFF"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="6"
        linesColor="#409EFF"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        style="position: absolute; z-index: -1 ;width: 95%;height: 95%;">
    </vue-particles>
    <div style="width: 98%;height: 90vh; top: 2%; position: absolute; z-index: -5 ;" class="bgimg"></div>
    <div style="width: 100%;height: 88vh; position: relative; z-index: 2 ;" >
      <div style="position: absolute;
          top: 0;left:0;right:0;bottom:0;
          margin: auto; opacity: 1;  ">
        <el-card
            name="el-zoom-in-bottom"
            style="width: 1000px; height: 250px;
            margin: 0 auto; margin-top: 30px;
            background: rgba(255,255,255, 0.5);
            text-align: center">
          <div style="">
            <div class="andysama">
            </div>
            <h1  class="textandy">andysama</h1>
          </div>
        </el-card>
        <div style="width: 1300px; margin: 0 auto; margin-top: 30px;">
          <div class="mainleft">
            <el-card style="width: 95%; height: 450px; padding: 30px" class="pd-10 introduceBox" >
              <p>Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p>
              <P>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5]  与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</P>
            </el-card>
          </div>
          <div class="mainright">
            <el-card style="width: 100%; height: 290px; margin-bottom: 10px; text-align: center"  >
              <template>
                <el-carousel :interval="4000" type="card" height="150px">
                  <el-carousel-item v-for="item in slideshow" :key="item.id">
                    <a :href="item.a" target="_blank">
                      <img style="object-fit: contain; height: 150px" :src="item.src">
                    </a>
                  </el-carousel-item>
                </el-carousel>
              </template>
              <h1 class="textandy">以上是本项目所用到的所有技术</h1>
            </el-card>
            <el-card style="width: 100%; height: 150px; text-align: center" shadow="hover" >
               <h1 class="textandy" style="margin: 0 ; ">联系作者</h1>
              <div class="r1-body">
                <div class="catch-me">
                  <div class="">
                    <el-tooltip class="item" content="Github" placement="top">
                      <a :href="catchMeObj.git" target="_blank"
                      ><i class="fa fa-fw fa-github"></i
                      ></a>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="QQ" placement="top">
                      <a :href="catchMeObj.qq" target="_blank"
                      ><i class="fa fa-fw fa-qq"></i
                      ></a>
                    </el-tooltip>
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="微博"
                        placement="top"
                    >
                      <a :href="catchMeObj.sina" target="_blank"
                      ><i class="fa fa-fw fa-weibo"></i
                      ></a>
                    </el-tooltip>
                  </div>
                  <div class="">
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="微信"
                        placement="top"
                    >
                      <a :href="catchMeObj.wechat" target="_blank"
                      ><i class="fa fa-fw fa-wechat"></i
                      ></a>
                    </el-tooltip>
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="CSDN"
                        placement="top"
                    >
                      <a :href="catchMeObj.csdn" target="_blank"><i class="">C</i></a>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>

  </div>


</template>

<script>
export default {
  name: "Introduce",
  data(){
    return{
      user : localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")): {},
      slideshow: [
        {
          id:1,
          src: require("../../assets/slideshow_img/slideshow1.jpg"),
          a:"https://baike.baidu.com/item/Java/85979?fr=aladdin"
        },
        {
          id:2,
          src: require("../../assets/slideshow_img/slideshow2.jpg"),
          a:"https://v2.cn.vuejs.org/"
        },
        {
          id:3,
          src: require("../../assets/slideshow_img/slideshow3.jpg"),
          a:"https://element.eleme.cn/#/zh-CN"
        },
        {
          id:4,
          src: require("../../assets/slideshow_img/slideshow4.jpg"),
          a:"https://spring.io/"
        },
        {
          id:5,
          src: require("../../assets/slideshow_img/slideshow5.jpg"),
          a:"https://nodejs.org/en/"
        },
      ],
      catchMeObj: {
        //个人信息
        git: "https://gitee.com",
        qq: "/static/img/qq.png",
        sina: "https://weibo.com",
        wechat: "/static/img/qq.jpg",
        csdn: "http://www.csdn.cn",
        job: "https://www.baidu.com",
      },
    }
  },
  mounted() {
    if(this.user.email == null || this.user.address == null|| this.user.avatarUrl == null){
      this.$notify({
        title: '个人中心',
        message: '尊敬的用户您的个人信息尚未完善请移动到个人中心完善个人信息',
        offset: 100,
        type: 'warning',
        duration: 0
      });
    }
  }
}
</script>

<style scoped>
.bgimg{
  position: absolute;
  top: 0;
  background: url(../../assets/introducebgimg.jpg) no-repeat ;
  background-size:110% 110%;
  opacity: 0.3;

}

.andysama{
  width: 140px;
  height: 140px;
  margin: 0 auto;
  background: url(../../assets/andy.jpeg) no-repeat;
  background-size:100% 100%;
  border-radius: 50%;
}
.textandy{
  margin-top: 20px;
  background-image: linear-gradient(to right, orange, purple);
  -webkit-background-clip: text;
  color: transparent;

  font-size: 30px;
}
.mainleft{
  width: 800px;
  display: inline-block;
}
.mainright{
  width: 500px;
  display: inline-block;
}
.introduceBox  p{
  margin-top: 50px;
}
/*element*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
/*                                */
.r1-body p {
  font-size: 14px;
  margin: 5px 0 8px 0;
  font-weight: 700;
  text-align: center;
}
.r1-body .catch-me {
  text-align: center;
}
.r1-body .catch-me a {
  display: inline-block;
  margin-bottom: 7px;
  position: relative;
  text-decoration: none;
}
.r1-body .catch-me a:hover i {
  color: #fff;
  background: #f4692c;
}
.r1-body .catch-me a i {
  display: inline-block;
  font-size: 18px;
  width: 30px;
  height: 30px;
  line-height: 42px;
  border-radius: 42px;
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  font-style: normal;
  margin: 0 3.2px;
}

</style>